<template>
  <div>
    <div class="list" v-if="addIsShow">
    <div class="top">
      <h3>文章列表</h3>
      <div class="search">
        <el-form :model="form" :inline="true">
          <el-form-item label="文章分类">
            <el-select v-model="form.art_name" placeholder="请选择分类">
              <el-option label="运动" value="yd"></el-option>
              <el-option label="时尚" value="ss"></el-option>
              <el-option label="科技" value="kj"></el-option>
              <el-option label="IT" value="it"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态">
            <el-select v-model="form.art_status" placeholder="请选择状态">
              <el-option label="已发布" value="ok"></el-option>
              <el-option label="草稿" value="no"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary">筛选</el-button>
          <el-button>重置</el-button>
        </el-form>
        <el-button type="primary" @click="addArticle">发表文章</el-button>
      </div>
    </div>
    <!-- 列表主体 -->
    <div class="bottom">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column
            prop="cate_name"
            label="分类"
          ></el-table-column>
          <el-table-column
            prop="put_date"
            label="发表时间"
          ></el-table-column>
          <el-table-column
            prop="state"
            label="状态"
          ></el-table-column>
          <el-table-column label="操作" width="400">
            <template #default="obj">
              <el-button type="primary" @click="edit(obj.row.id)">修改</el-button>
              <el-button type="danger" @click="del(obj.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <el-dialog title="修改文章" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="标题" :label-width="formLabelWidth">
      <el-input v-model="listForm.cate_name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="内容" :label-width="formLabelWidth">
      <el-input v-model="listForm.content" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="发布状态" :label-width="formLabelWidth">
      <el-select v-model="listForm.state" placeholder="请选择状态">
              <el-option label="已发布" value="已发布"></el-option>
              <el-option label="草稿" value="草稿"></el-option>
            </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </div>
</el-dialog>
    </div>
  </div>
  <AddArticle v-else @changeShow="changeShow"></AddArticle>
  </div>
</template>

<script>
import { getArticleList, getInfo, editInfo, removeInfo } from '@/api/article'
import AddArticle from './AddArticle'
export default {
  components: {
    AddArticle
  },
  data () {
    return {
      form: {
        art_name: '', // 分类名称
        art_status: '' // 分类状态
      },
      listForm: {
      },
      tableData: [], // 表格数据
      pagenum: 1, // 当前页码
      pagesize: 10, // 当前页数据
      dialogFormVisible: false, // 弹窗开关
      formLabelWidth: '120px',
      addIsShow: true // 发表文章显示
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 列表数据
    async initData () {
      const res = await getArticleList({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      })
      this.tableData = res.data
    },
    // 编辑
    async edit (id) {
      const res = await getInfo(id)
      this.dialogFormVisible = true
      this.listForm = res.data
    },
    // 提交修改
    async submit () {
      const formData = new FormData()
      formData.append('title', this.listForm.cate_name)
      formData.append('id', this.listForm.id)
      formData.append('cate_id', this.listForm.cate_id)
      formData.append('content', this.listForm.content)
      formData.append('state', this.listForm.state)
      formData.append('cover_img', this.listForm.cover_img)
      await editInfo(formData)
      this.$message.success('修改成功')
      this.dialogFormVisible = false
    },
    // 删除
    async del (id) {
      const res = await removeInfo(id)
      console.log(res)
      this.$message.success('删除成功')
      this.initData()
    },
    // 发表文章
    addArticle () {
      this.addIsShow = false
    },
    // 关闭发表文章组件
    changeShow () {
      this.addIsShow = true
      this.initData()
    }
  }
}
</script>

<style lang="less" scoped>
.list {
  margin: 30px 30px;
  h3 {
    margin-bottom: 30px;
  }
  .search {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /deep/.el-form--inline .el-form-item {
      margin-right: 70px;
      .el-input__inner {
        width: 300px;
      }
    }

  }

  .bottom {
    margin-top: 30px;
  }
}
</style>
